<template>
  <div>
    <wx-tables
      :columns="columns"
      title="学生管理"
      :data-source="dataSource"
      :loading="loading"
      :total="total"
      :page.sync="page"
    >
      <template #search>
        <!--        <tip-block tip="搜索" />-->
        <el-form label-position="left" style="margin-top: 10px;">
          <div style="display: flex;">
            <el-form-item style="display: flex;" label="学生姓名" prop="search_code">
              <el-input v-model="searchForm.student_name" clearable placeholder="请输入" />
            </el-form-item>
            <el-form-item style="display: flex;margin-left: 2%;" label="所在学部" prop="search_code" @submit.native.prevent>
              <el-select v-model="searchForm.department_id" clearable placeholder="请选择学部">
                <el-option
                  v-for="item in select_dept"
                  :key="item.type"
                  :label="item.label"
                  :value="item.type"
                />
              </el-select>
            </el-form-item>
            <el-form-item style="display: flex;margin-left: 2%;" label="所在年级" prop="search_code" @submit.native.prevent>
              <el-select v-model="searchForm.search_grade_name" clearable placeholder="请选择年级">
                <el-option
                  v-for="item of 20"
                  :key="item"
                  :label="item"
                  :value="item"
                />
              </el-select>
            </el-form-item>
            <el-form-item style="display: flex;margin-left: 2%;" label="所在班级" prop="search_code">
              <el-select v-model="searchForm.search_class_name" clearable placeholder="请选择班级">
                <el-option
                  v-for="item of 20"
                  :key="item"
                  :label="item"
                  :value="item"
                />
              </el-select>
            </el-form-item>
            <div style="margin-left: 5%;">
              <el-button type="primary" class="table-btn" icon="el-icon-search" @click="handleSearchClick">筛选</el-button>
              <el-button class="table-btn" icon="el-icon-refresh" @click="handleRectSearch">重置</el-button>
            </div>
          </div>
        </el-form>
      </template>
      <!-- tools -->
      <template v-slot:parents="record">
        {{ record.row.parents.map(item => item.relationship + ':' + item.name).join(',') || '无' }}
      </template>
      <!--      <template v-slot:class="record">-->
      <!--        {{ record.row.class.name }}-->
      <!--      </template>-->
      <!--      <template v-slot:grade="record">-->
      <!--        {{ record.row.class.grade_name }}-->
      <!--      </template>-->
      <template #tools>
        <!--        <el-button type="primary" class="table-btn" icon="el-icon-plus" @click="handleOpenMyForm()">新增</el-button>-->
        <!--        <el-button class="table-btn" icon="el-icon-refresh-right" @click="handleGetTable">刷新</el-button>-->
      </template>
      <!-- table slots -->
      <template v-slot:oper="record">
        <div class="oper-box">
          <span><el-link type="primary" @click="handleOpenFormByRow(record.row)">编辑</el-link></span>
          <el-popconfirm
            :ref="`popover-${record.$index}`"
            title="是否确认删除学生？"
            @confirm="handleDeleteClick(record.row.id)"
          >
            <el-link slot="reference" type="primary">删除</el-link>
          </el-popconfirm>
          <!--          <el-popconfirm-->
          <!--            :ref="`popover-${record.$index}`"-->
          <!--            :title="`确定${record.row && record.row.status === 0 ? '启用':'注销'}当前学生吗？`"-->
          <!--            @confirm="handleSetStatus(record.row,'api/adminPortal/student/setStatus')"-->
          <!--          >-->
          <!--            <el-link slot="reference" type="primary">{{ record.row && record.row.status === 0 ? '启用':'注销' }}</el-link>-->
          <!--          </el-popconfirm>-->
        </div>
      </template>
    </wx-tables>

    <wx-full title="编辑" :visible.sync="formVisible">
      <template v-slot:tools>
        <!--        <el-link v-if="isAdd" type="primary" :disabled="formBtnDisabled" @click="handleSaveDraft">保存草稿</el-link>-->
        <!--        <el-link v-else type="primary" :disabled="formBtnDisabled" @click="handleSaveMyForm">保存</el-link>-->
      </template>
      <student-detail ref="myForm" :form-info="studentFormInfo" @close="close" />
    </wx-full>
  </div>
</template>

<script>
import WxFull from '@/components/WxFull'
import { handleDeleteStudent } from '@/api/common'
import WxTables from '@/components/WxTables'
import TableMixins from '@/components/WxTables/mixins'
import StudentDetail from './Form'
import { SELECT_ROLE } from '@/views/constants'
export default {
  name: 'Student',
  components: {
    WxTables,
    WxFull,
    StudentDetail
  },
  mixins: [TableMixins],
  data() {
    return {
      studentFormInfo: {},
      editCon: ['name', 'address', 'class_name'],
      SELECT_ROLE,
      changeRole: false,
      formVisible: false,
      columns: [
        { config: { type: 'index', width: 100 }, label: '序号' },
        { dataIndex: 'name', label: '学生姓名' },
        { dataIndex: 'parents', label: '家长姓名', slots: true },
        { dataIndex: 'gradeName', label: '所在年级' },
        { dataIndex: 'className', label: '所在班级' },
        { dataIndex: 'oper', label: '操作', slots: true }
      ],
      markId: 'id',
      // 查询表格API
      api: 'api/adminPortal/student/getListByCon?level=parent,class_grade_department_school,teacher',
      baseApi: 'api/adminPortal/student/',
      select_grade: [],
      select_dept: []
    }
  },
  watch: {
    dataSource() {
      this.dataSource.forEach((item) => {
        if(item && item.class && item.grade){
          item.className = item.class.name
          item.gradeName = item.grade.name
        }
      })
    }
  },
  mounted() {
    this.handleGetYearDepartment()
  },
  methods: {
    handleDeleteClick(id) {
      handleDeleteStudent(id).then((res) => {
        if (res.code === 200) {
          this.$message('删除成功')
          this.handleGetTable()
        }
      })
    },
    handleOpenFormByRow(data) {
      this.studentFormInfo = data
      this.formVisible = true
    },
    close() {
      this.formVisible = false
    }
  }
}
</script>
